<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>sku管理</title>
	<meta th:replace="admin/template/head.html"/>

</head>
<body>

<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" lay-event="add">
			为商品
			<span th:text="${product?.title}"></span>
			（id:<b th:text="${pid}"></b>）
			添加sku
		</button>
		<button class="layui-btn layui-btn-sm" lay-event="refresh">刷新列表</button>
		<button class="layui-btn layui-btn-sm" lay-event="opennewwindow">新窗口</button>
	</div>
</script>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<!--<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">详情</a>-->
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="picture">
	{{pictureShow(d.cover)}}
</script>

<script th:replace="admin/template/picbox.html"></script>
<script>
	const pid = [[${pid}]];
	let $ ,layer,table;
	layui.use(['table','form'], function(){
		table=layui.table;
		const form = layui.form;
		$ = layui.jquery;
		layer = layui.layer;

		table.render({
			elem: '#dataTable'
			,url:'/sku/list?pid='+pid
			,toolbar: '#toolbarDemo'
			,title: '用户数据表'
			,totalRow: true
			,cols: [
				[
					// {type: 'checkbox', fixed: 'left'},
					{field:'id', title:'ID', width:80, fixed: 'left', unresize: true,}
                    ,{field:'sort', title:'排序', edit: 'text',width:80}
					,{field:'title', title:'sku名称'}
					,{field:'productName', title:'所属商品', width:120}
					,{field:'cover', title:'封面'}
					,{field:'cover', title:'预览',templet:"#picture"}
					,{field:'guidePrice', title:'零售售', width:120}
					// ,{field:'lowestPrice', title:'最低价', width:120}
					,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:240}
				]
			]
			,page: true
			,limit:10
			,limits:[10,50,80],
			// ,id:'dataTable',
            done:function(){
                console.log('表格渲染完成');
                lightbox();//绑定相册插件
            }
		});

		//工具栏事件
		table.on('toolbar(dataTable)', function(obj){
			let checkStatus = table.checkStatus(obj.config.id);
			let data = checkStatus.data;
			switch(obj.event){
				case 'refresh':
					/* 刷新列表数据 */
					table.reload('dataTable', {page: { curr: 1}});
					break;
				case 'getCheckLength':
					layer.msg('选中了：'+ data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选': '未全选')
					break;
				case 'add':
					layer.open({
						type: 2
						,offset:'auto'
						,title:'添加产品sku'
						,content:'/sku/editPage?pid=' + pid
						,area:['90%','98%']
						// ,btn:'关闭全部'
						,btnAlign:'c'
						,yes:function () {
							parent.layer.closeAll();
                            console.log('关闭了窗口了！！！！！！！！')
                            window.location.reload()
						}
					});
					break;
				case 'opennewwindow':
				    let url = window.location.href
					window.open(url)
				    break;
			};
		});



		//工具条事件
		table.on('tool(dataTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			let id = obj.data.id; //获得当前行数据
			let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			if(layEvent === 'del'){ //删除
				layer.confirm('真的删除行么', function(index){

					$.post('/sku/delete', {id: id}, (res) => {
						layer.close(index);
						layer.msg(res.msg);
						if(res.code==0){
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						}
					})

					//向服务端发送删除指令
					//todo
				});
			} else if(layEvent === 'edit') { //编辑
				layer.open({
					type: 2
					,offset:'auto'
					,title:'修改产品sku'
					,content:'/sku/editPage?id=' + id
					,area: ['90%','98%']
					,btn:'关闭全部'
					,btnAlign:'c'
				});
			} else if(layEvent === 'detail') {
				openDetail(id);
			}
		});

        //监听单元格编辑
        table.on('edit(dataTable)', function(obj){
            var value = obj.value.trim() //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段

            console.log('是否NAN',isNaN(value))
            if( isNaN(value) || !value ) {
                layer.msg("非法输入")
                table.reload('dataTable')
            } else {
                $.ajax({
                    type:"POST",
                    url:'/sku/sort',
                    // dataType:'',
                    data:{id:data.id,sort:value},
                }).done(function(res){
                    if(res.code==0){
                        console.log('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ value);
                        layer.msg(res.msg);
                        table.reload('dataTable')
                    }else{
                        layer.msg(res.msg)
                    }
                }).always(function(){

                })
            }
        });
        // //触发行双击事件
        // table.on('rowDouble(product)', function(obj){
        //     let id = obj.data.id;
        //     openDetail(id);
        // });
	});




</script>
</body>
</html>